<template>
  <div>
    <el-input v-model="keyword" style="margin-bottom: 1em"/>
    <baidu-map id="mapID" :center="postionMap" :scroll-wheel-zoom="true" :zoom="zoom" class="map" @click="getPoint">
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"/>
      <bm-local-search
          :auto-viewport="true"
          :keyword="keyword"
          :location="location"
          style="display: none"
          zoom="12.8"/>
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"/>
      <bm-marker :position="postionMap">
        <bm-info-window :show="show"
                        style="font-size: 14px"
                        @close="infoWindowClose"
                        @open="infoWindowOpen">
          <h6 style="text-align: center"> 选中地址</h6>
          <p style="text-align: center">{{ add.site }}</p>
        </bm-info-window>
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jgNameDialog: false,
      show: false,
      postionMap: {  //地图坐标
        lng: 104.06,
        lat: 30.67,
      },
      location: "",
      keyword: "",  //搜索框关键词
      zoom: 12.8,   //放大比例
      address: "",   //位置详细信息
      add: {
        siteName: "",
        site: "",
        jd: "",
        wd: "",
        desce: "",
        type: "",
        jgName: "",
        jgNum: "",
      },
      organizationData: [],
      jgName: "",
      jgNum: "",

    };
  },

  methods: {
    getPoint (e) {
      this.show = true;
      this.postionMap.lng = e.point.lng;
      this.postionMap.lat = e.point.lat;
      this.add.jd = e.point.lng;
      this.add.wd = e.point.lat;
      this.zoom = e.target.getZoom();
      let geocoder = new BMap.Geocoder();

      geocoder.getLocation(e.point, rs => {
        this.add.site = rs.address;
        this.keyword = rs.address;
        this.$emit("confirm-location", {
          address: rs.address,
          lng: e.point.lng,
          lat: e.point.lat,
        });
      });
    },
    infoWindowClose () {
      this.show = false;
    },
    infoWindowOpen () {
      setInterval(() => {
        this.show = true;
      }, 100);
    },
  },

};
</script>

<style  lang="less" scoped>
.map {
  width: 100%;
  height: 400px;
}

::v-deep .BMap_cpyCtrl {
  display: none;
}

::v-deep .anchorBL {
  display: none;
}
</style>
